<script setup lang="ts">
import { onMounted, ref } from 'vue';
import ProjectHeader from './DachuangProjectDetailsHeader2.vue';
import ProjectIntroduction from './DachuangProjectDetailsIntroduction2.vue'
import ProjectTeam from './DachuangProjectDetailsTeam2.vue'
import type { ProjectDetails } from '../types/ProjectDetails';
import type { ProjectIntroProps } from '../types/ProjectIntroProps';
import { getProjectDetailsIntroduceApi, getProjectDetailsMetaApi, getProjectDetailsmembersApi } from '@/api/innovationSquare/projectApi';
import type { ProjectHeaderProps } from '../types/ProjectHeadersProp';
import type { ProjectTeamProps } from '../types/ProjectTeamProps'
import { useRoute } from 'vue-router';
import router from '@/router'

const route = useRoute()
const projectId = String(route.params.projectId);

const liked = ref(false);
const collected = ref(false);
const activeKey = ref('1');
const loading = ref(false);
const projectMeta = ref<ProjectDetails>();
const headerProp = ref<ProjectHeaderProps>({
  name: '',
  tags: [],
  advertise: '',
  company: '',
  introductors: '',
  liked: liked.value,
  collected: collected.value,
  projectStyle: '',
  exhibitionCode: '',
});
const introProp = ref<ProjectIntroProps>({
  introduction: '',
  innovation: '',
  projectImages: '',
  directionField: '',
  directionTechnical: '',
  resources: '',
  submissionMaterials: '',
  evaluationMethod: '',
  supportMatching: '',
  supportPolicy: '',
  iconicResults: '',
  challenge: '',
  undergraduatesAchievement: '',
});
const teamMembers = ref<ProjectTeamProps>({
  teachers: [],
  members: [],
});

const fetchProject = async () => {
  loading.value = true;

  if (!projectId) {
    console.error('No projectId found:', projectId);
    return;
  }
  try {
    // 头数据
    const detailsResponse = await getProjectDetailsMetaApi(projectId)
    projectMeta.value = detailsResponse.data;
    headerProp.value.name = detailsResponse.data.name;
    headerProp.value.advertise = detailsResponse.data.advertise;
    headerProp.value.tags = detailsResponse.data.tags;
    headerProp.value.company = detailsResponse.data.company;
    headerProp.value.introductors = detailsResponse.data.introductors;
    headerProp.value.liked = liked.value;
    headerProp.value.collected = collected.value;
    headerProp.value.projectStyle = detailsResponse.data.projectStyle;
    headerProp.value.exhibitionCode = detailsResponse.data.exhibitionCode;

    // 介绍
    const introResponse = await getProjectDetailsIntroduceApi(projectId)
    introProp.value = introResponse.data;

    // 团队
    const teamResponse = await getProjectDetailsmembersApi(projectId)

    if (teamResponse) {
      teamMembers.value.teachers = teamResponse
        .filter((member: any) => member.userType === '指导老师')
        .map(({ userName, userCollege }: { userName: string; userCollege: string }) => ({
          userName,
          userType: '指导老师',
          userCollege,
        }));

      teamMembers.value.members = teamResponse
        .filter((member: any) => member.userType === '项目成员')
        .map(({ userName, userGrade, userCollege }: { userName: string; userGrade: string; userCollege: string }) => ({
          userName,
          userType: '项目成员',
          userGrade,
          userCollege,
        }));
    }
  }
  catch (error) {
    console.error('Error fetching project data:', error);
  }
  finally {
    loading.value = false
  }
}

// fetchProject();

onMounted(() => {
  fetchProject();
});

const titleParts = '双创广场 > 项目展示 > 详情'.split(' > ');
const handleBreadcrumbClick = (part: string) => {
  if (part === '项目展示' || part === '双创广场')
    router.push('/user/dachuang');
}

const handleReturnBtnClicked = () => {
  if (projectId)
    router.push(`/user/dachuang/project`);
}
</script>

<template>
  <a-layout style="overflow-y: auto;">
    <a-button style="margin: 0.5rem;" @click="handleReturnBtnClicked()">
      返回主界面
    </a-button>

    <ProjectHeader :header="headerProp" style="margin: 0.5rem;" />

    <div style="background-color: white; margin: 0.5rem; border-radius: 1rem;">
      <a-tabs v-model="activeKey" style="padding: 0.5rem;">
        <a-tab-pane key="1" tab="项目简介">
          <ProjectIntroduction :intro="introProp" />
        </a-tab-pane>

        <a-tab-pane v-if="String(projectMeta?.projectStyle) === '1' || String(projectMeta?.projectStyle) === '4'" key="2" tab="项目团队">
          <ProjectTeam :card="teamMembers" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-layout>
</template>

<style lang="scss">
</style>
